<template>
  <div>
    <p>
      商品名称：<input type="text" v-model="list.listName" /> 
      商品价格：<input type="text" v-model="list.listPrice"/>
      <button @click="add()">增加商品</button>
    </p>
  </div>
</template>

<script>
// 导入bus.js
import Bus from "@/Bus";
export default {
  data() {
    return {
      list: {
        listName: "", //商品名
        listPrice: "", //商品价格
      },
      listData:[]
    };
  },
  methods: {
    add() {
        if(this.list.listName==''||this.listPrice==''){
            return alert('内容不能为空')
        }
        // 组合对象，将输入框的用户输入内容使用对象形式存储到obj变量里  变量是存储数据的(变量=后面的值就是存储的数据，而数据的类型可以是简单类型(String、Number、Boolean、Null、Undefined、Symbol)也可以是引用数据类型)
        let obj = {
            title:this.list.listName,
            price:this.list.listPrice
        }
        this.listData.push(obj)
        //方法和函数本质一样：不调用不执行，在哪调用在哪执行
        this.send()
        // 自定义数据obj存储到数组并且发送到兄弟组件后，清空输入框数据
        this.list={
            listName:'',
            listPrice:'',
        }
    },
    //兄弟组件通信
    send(){
        Bus.$emit('send',this.listData)
    },

  },
  mounted () {
    // this.add()
  },
};
</script>

<style lang="scss" >
</style>